<template>
  <div class="content" style="overflow: hidden;">
    <div class="content-left">
      <div class="left-top">
        <div class="top-title">
          <div class="time-box">
            <h1 style="color: #333333">{{ nowTime }}</h1>
            <span style="color: #333333; margin-right: 5px">{{ nowWeek }}</span>
            <span style="color: #333333">{{ nowDate }}</span>
          </div>
          <div>
            <iframe allowtransparency="true" frameborder="0" width="410" height="98" scrolling="no" src="https://tianqi.2345.com/plugin/widget/index.htm?s=1&z=3&t=1&v=0&d=2&bd=0&k=000000&f=&ltf=009944&htf=cc0000&q=0&e=0&a=1&c=54511&w=410&h=98&align=center"></iframe>
            <!-- <iframe scrolling="no" src="https://tianqiapi.com/api.php?style=ya&skin=pitaya&city=银川" frameborder="0"
                    width="320" height="173" allowtransparency="true"></iframe> -->
          </div>
          <div class="collection">
            <div style="color: #333333">
              <a-icon style="color: #1d79fa; margin-right: 10px" type="clock-circle"/>
              采集时间：
              <span style="color: #1d79fa; margin-right: 5px">{{ nowDate }}</span>
              <span style="color: #1d79fa">{{ nowTime }}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="left-bottom">
        <div class="thermometer">
          <div class="temperature-box" v-for="(items, indexs) in lists" :key="indexs">
            <div class="temperatureList"></div>
            <div style="text-align: center;margin-top: -18px;color: #2892FE">{{ items.name }}</div>
          </div>
        </div>
        <div class="meter">
          <div class="meter-box" v-for="(item, index) in list" :key="index">
            <div class="myChart"></div>
          </div>
        </div>
        <div class="time-monitor">
          <div class="time-title">
            <div style="height: 32px">
              <em></em>
              <h1>24小时监测</h1>
            </div>
            <div>
              <a-button style="background: linear-gradient(90deg, #3B7FF7, #36A7FD);border: none;border-radius: 16px;"
                        type="primary" @click="$router.push('/wfinfo/real/DataAnalysis')"> 历史数据
              </a-button>
            </div>
          </div>
          <div class="history-box">
            <div style="margin: 10px 0 10px 20px">
              <a-radio-group v-model="historyValue" @change="historyBtn">
                <a-radio-button value="wd"> 空气温度</a-radio-button>
                <a-radio-button value="sd"> 空气湿度</a-radio-button>
                <a-radio-button value="jy"> 降雨量</a-radio-button>
<!--                <a-radio-button value="yl"> 大气压力</a-radio-button>-->
<!--                <a-radio-button value="fs"> 风速</a-radio-button>-->
              </a-radio-group>
            </div>
            <div id="history"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="content-right">
      <div class="right-list">
        <h1>风力(级)</h1>
        <img src="../../../assets/icon/icon.png"/>
        <p class="right-list-words">{{ windpower }}</p>
      </div>
      <div class="right-list">
        <h1>风速(m/s)</h1>
        <img src="../../../assets/icon/icon-1.png"/>
        <p class="right-list-words">{{ windSpeed }}</p>
      </div>
      <div class="right-list">
        <h1>瞬时雨量(mm)</h1>
        <img src="../../../assets/icon/icon-2.png"/>
        <p class="right-list-words">{{ InstantaneousRainfall }}</p>
      </div>
      <div class="right-list">
        <h1>当前雨量(mm)</h1>
        <img src="../../../assets/icon/icon-3.png"/>
        <p class="right-list-words">{{ CurrentRainfall }}</p>
      </div>
      <div class="right-list">
        <h1>累计雨量(mm)</h1>
        <img src="../../../assets/icon/icon-4.png"/>
        <p class="right-list-words">{{ rainfall }}</p>
      </div>
    </div>
  </div>
</template>
<script lang="js">
import {collection} from '@/api/meteorological'

export default {
  data() {
    return {
      timer: null,
      historyTime: null,
      allData: null,
      allEcharts: 0,
      title: '空气温度',
      titleStatus: false,
      nowWeek: '',
      nowDate: '',
      nowTime: '',
      windpower: '',
      windSpeed: '', // 风速
      InstantaneousRainfall: '',
      CurrentRainfall: '',
      rainfall: '', // 降雨量
      temperature: '', // 空气温度
      humidity: '', // 空气湿度
      pressure: '', // 大气压力
      //  数据监测
      historyValue: 'wd',
      list: [
        {
          id: 1,
          value: '',
          name: '大气压力',
          Symbol: 'kpa',
          min: 0,
          max: 250,
          splitNumber: 4,
          startAngle: 220, //开始角度 左侧角度
          endAngle: -40, //结束角度 右侧
          pointer: true,
          colorList: [
            [0.7, '#02EEFF'],
            // [0.7, '#CBD8EA'],
            [1, '#CBD8EA'],
          ]
        },
        {
          id: 2,
          value: 0,
          name: '风速',
          Symbol: 'm/s',
          min: 0,
          max: 3,
          splitNumber: 4,
          startAngle: 220, //开始角度 左侧角度
          endAngle: -40, //结束角度 右侧
          pointer: true,
          colorList: [
            [0.7, '#00D98B'],
            // [0.7, '#CBD8EA'],
            [1, '#CBD8EA'],
          ]
        },
        {
          id: 3,
          value: 0,
          name: '风向',
          Symbol: '',
          min: 0,
          max: 360,
          splitNumber: 4,
          startAngle: 360, //开始角度 左侧角度
          endAngle: 0, //结束角度 右侧
          pointer: false,
          colorList: [
            [0.2, '#FAD8CD'],
            // [0.7, '#CBD8EA'],
            [1, '#FFAB91'],
          ]
        },
      ],
      lists: [
        {
          id: 1,
          value: 0,
          name: '温度',
          Symbol: '℃'
        },
        {
          id: 2,
          value: 0,
          name: '湿度',
          Symbol: '%RH'
        },
        {
          id: 3,
          value: 0,
          name: '降雨量',
          Symbol: 'mm'
        },
      ],
    }
  },
  components: {},
  mounted() {
    this.dataList()
    this.timerChange()
    this.history()
    this.timer = setInterval(this.get, 1000);
  },
  created() {
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer) // 在Vue实例销毁前，清除我们的定时器
    }
  },
  watch: {
    title(newName, oldName) {
      // console.log(newName, oldName)
      this.title = newName
    }
  },
  methods: {
    get() {
      // this.dataList()
    },
    // 24小时监测
    historyBtn(e) {
      console.log(e)
      clearInterval(this.historyTime)
      var echarts = require('echarts')
      var historyList = document.getElementById('history') // 对应地使用ByClassName
      // 通过for循环，在相同class的dom内绘制元素
      var myChart = echarts.init(historyList)
      var timer = null;
      // X轴数据
      let color = ['#5391FF']
      var xAxisData = [];
      // 需要渲染的series数据
      var seriesData = [];
      var startNumber = 0;
      // 有多少条数据
      var xAxisDatalen = xAxisData.length;
      // len的值,可以根据你的数量量设置,不要超过xAxisDatalen的值,不然不会动
      var len = 5;
      this.historyTime = setInterval(() => {
        this.setNowTimes()
        xAxisData.push(this.setNowTimes())
        e.target.value === 'sd' ? seriesData.push(this.humidity) : (e.target.value === 'jy' ? seriesData.push(this.rainfall) : (e.target.value === 'fs' ? seriesData.push(this.windSpeed) : (e.target.value === 'wd' ? seriesData.push(this.humidity) : (e.target.value === 'yl' ? seriesData.push(this.pressure) : seriesData.push(this.humidity))))),
          myChart.setOption(option);
        if (startNumber === xAxisDatalen - len) {
          startNumber = 0;
        }
        myChart.dispatchAction({
          type: 'dataZoom',
          startValue: startNumber,
          endValue: startNumber + len,
        });
        startNumber++;
      }, 1000)
      // 基于准备好的dom，初始化echarts实例
      // var myChart = echarts.init(document.getElementById('myCharts'));
      // 指定图表的配置项和数据
      var option = {
        grid: {
          left: '5%',
          bottom: '23%',
          top: '15%',
          right: '5%',
        },

        legend: {
          top: 20,
        },
        color: color,
        tooltip: {
          trigger: 'axis',
        },
        dataZoom: [{
          type: 'slider',
          show: false,
          realtime: true,
          startValue: 0,
          endValue: 2, // 初始显示index0-30的数据,可根据你的数据量设置
          filterMode: 'none',
        },],
        xAxis: {
          show: true,
          boundaryGap: false,
          data: xAxisData
        },
        yAxis: [{
          type: 'value'
        },],
        series: [{
          type: 'line',
          name: e.target.value === 'sd' ? '空气湿度' : (e.target.value === 'jy' ? '降雨量' : (e.target.value === 'fs' ? '风速' : (e.target.value === 'wd' ? '空气温度' : (e.target.value === 'yl' ? '大气压力' : '空气温度')))),
          smooth: true,
          itemStyle: {
            color: '#188df0',
          },
          symbol: 'circle', //数据交叉点样式
          areaStyle: {
            // 渐变色
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: '#188df0',
            },
              {
                offset: 1,
                color: '#83bff6',
              },
            ]),
          },

          data: seriesData
        },],
      };
    },
    // 数据请求
    dataList() {
      collection().then(res => {
        this.windpower = res.result.data[0].realTimeData[0].dataValue || 0
        this.windSpeed = res.result.data[0].realTimeData[1].dataValue || 0
        this.InstantaneousRainfall = res.result.data[4].realTimeData[0].dataValue || 0
        this.CurrentRainfall = res.result.data[4].realTimeData[1].dataValue || 0
        this.rainfall = res.result.data[3].realTimeData[0].dataValue || 0
        this.temperature = res.result.data[2].realTimeData[0].dataValue || 0
        this.humidity = res.result.data[2].realTimeData[1].dataValue || 0
        // this.rainfall = res.result.data[4].realTimeData[1].dataValue || 0
        this.pressure = res.result.data[0].realTimeData[0].dataValue || 0
        this.lists[0].value = parseInt(res.result.data[2].realTimeData[0].dataValue) || 0
        this.lists[1].value = isNaN(parseInt(res.result.data[2].realTimeData[1].dataValue)) ? 0 : parseInt(res.result.data[2].realTimeData[1].dataValue)
        this.lists[2].value = isNaN(parseInt(res.result.data[3].realTimeData[0].dataValue)) ? 0 : parseInt(res.result.data[3].realTimeData[0].dataValue)
        this.list[0].value = isNaN(parseInt(res.result.data[0].realTimeData[0].dataValue)) ? 0 : parseInt(res.result.data[0].realTimeData[0].dataValue)
        this.list[1].value = isNaN(parseInt(res.result.data[0].realTimeData[1].dataValue)) ? 0 : parseInt(res.result.data[0].realTimeData[1].dataValue)
        this.list[2].value = res.result.data[1].realTimeData[0].dataValue || '暂无'
        this.allEcharts = this.temperature
        console.log(this.humidity, this.temperature)
        // 温度计
        this.temperatures()
        this.drawLine()
      }).catch(err => {
        // console.log(err)
      })
    },
    // 仪表图
    drawLine() {
      var echarts = require('echarts')
      var roseCharts = document.getElementsByClassName('myChart') // 对应地使用ByClassName
      for (var i = 0; i < roseCharts.length; i++) {
        // 通过for循环，在相同class的dom内绘制元素
        var myChart = echarts.init(roseCharts[i])
        myChart.setOption({
          series: [
            {
              startAngle: this.list[i].startAngle, //开始角度 左侧角度
              endAngle: this.list[i].endAngle, //结束角度 右侧
              type: 'gauge',
              center: ["50%", "43%"],
              radius: '75%',
              axisLine: {
                lineStyle: {
                  width: 10,
                  color: this.list[i].colorList,
                },
              },
              pointer: {
                show: this.list[i].pointer,
                length: "60%",
                itemStyle: {
                  color: 'auto',
                },
              },
              axisTick: {
                distance: 1,
                length: 8,
                lineStyle: {
                  color: '#67e0e3',
                  width: 1,
                },
              },
              splitLine: {
                distance: -20,
                length: 30,
                lineStyle: {
                  color: '#fff',
                  width: 2,
                  fontSize: 10
                },
              },
              min: this.list[i].min,
              max: this.list[i].max,
              splitNumber: this.list[i].splitNumber,
              axisLabel: {
                color: 'auto',
                distance: 12,
                fontSize: 12,
                formatter: function (e) {
                  switch (e + "") {
                    case "360":
                      return "东";
                    case "90":
                      return "南";
                    case "180":
                      return "西";
                    case "270":
                      return "北";
                    default:
                      return e;
                  }
                },
              },
              detail: {
                valueAnimation: true,
                formatter: this.list[i].value + this.list[i].Symbol,
                color: 'auto',
                offsetCenter: [0, "35%"],
                fontSize: 12,
              },
              title: {
                offsetCenter: ['0', '120%'],
                fontSize: 14,
                color: "#2F54EB",
                show: true
              },
              data: [
                {
                  value: this.list[i].value,
                  name: this.list[i].name,
                },
              ],
            },
          ],
        })
      }
    },
    // 温度计
    temperatures() {
      var echarts = require('echarts')
      var roseCharts = document.getElementsByClassName('temperatureList') // 对应地使用ByClassName
      var TP_value = 10 // 温度
      var kd = [] // 刻度
      var Gradient = [] // 存放颜色的数组
      var leftColor = '' // 显示文本的颜色
      var showValue = '' // 显示内容 温度数字
      var boxPosition = [1, 0] // 显示内容的定位
      var TP_txt = '' // 显示内容 文本

      // 刻度使用柱状图模拟，短设置1，长的设置3；构造一个数据
      for (var i = 0, len = 200; i <= len; i++) {
        if (i < 10 || i > 200) {
          kd.push('')
        } else {
          if ((i - 10) % 20 === 0) {
            kd.push('-3')
          } else if ((i - 10) % 4 === 0) {
            kd.push('-1')
          } else {
            kd.push('')
          }
        }
      }

      //中间线的渐变色和文本内容
      if (TP_value > 20) {
        Gradient.push(
          {
            offset: 0,
            color: '#2892FE',
          },
          {
            offset: 0.5,
            color: '#5EE65F',
          },
          {
            offset: 1,
            color: '#5EE65F',
          }
        )
      } else if (TP_value > -20) {
        Gradient.push(
          {
            offset: 0,
            color: '#2892FE',
          },
          {
            offset: 1,
            color: '#5EE65F',
          }
        )
      } else {
        Gradient.push({
          offset: 1,
          color: '#2892FE',
        })
      }
      if (TP_value > 62) {
        showValue = 62
      } else {
        if (TP_value < -60) {
          showValue = -60
        } else {
          showValue = TP_value
        }
      }
      // 避免温度过低 右侧指示内容出界
      // if (TP_value < -10) {
      //   boxPosition = [10, -10]
      // }
      leftColor = Gradient[Gradient.length - 1].color
      // 因为柱状初始化为0，温度存在负值，所以加上负值60和空出距离10
      for (var i = 0; i < roseCharts.length; i++) {
        // 通过for循环，在相同class的dom内绘制元素
        var myChart = echarts.init(roseCharts[i])

        myChart.setOption({
          grid: {
            left: '45%',
            bottom: '23%',
            top: '10%',
          },
          yAxis: [
            {
              show: false,
              data: [],
              min: 0,
              max: 135,
              axisLine: {
                show: false,
              },
            },
            {
              show: false,
              min: 0,
              max: 50,
            },
            {
              type: 'category',
              data: ['', '', '', '', '', '', '', '', '', '', ''],
              position: 'left',
              offset: -150,
              axisLabel: {
                fontSize: 18,
                color: 'white',
              },
              axisLine: {
                show: false,
              },
              axisTick: {
                show: false,
              },
            },
          ],
          xAxis: [
            {
              show: false,
              min: -10,
              max: 80,
              data: [],
            },
            {
              show: false,
              min: -10,
              max: 80,
              data: [],
            },
            {
              show: false,
              min: -10,
              max: 80,
              data: [],
            },
            {
              show: false,
              min: -5,
              max: 80,
            },
          ],
          series: [
            {
              name: '条/温度计柱',
              type: 'bar',
              // 对应上面XAxis的第一个对象配置
              xAxisIndex: 0,
              data: [
                {
                  value: this.lists[i].value + 70,
                  label: {
                    normal: {
                      show: true,
                      position: boxPosition,
                      width: 100,
                      height: 30,
                      padding: [-10, -10, 0, 10],
                      formatter: '{back| ' + this.lists[i].value + this.lists[i].Symbol + ' }',
                      rich: {
                        back: {
                          align: 'center',
                          lineHeight: 36,
                          fontSize: 18,
                          fontFamily: '微软雅黑',
                          color: '#2F54EB',
                        },
                        unit: {
                          align: 'center',
                          fontFamily: '微软雅黑',
                          fontSize: 14,
                          lineHeight: 36,
                          color: '#2F54EB',
                        },
                        downTxt: {
                          lineHeight: 36,
                          fontSize: 24,
                          align: 'center',
                          color: '#2F54EB',
                        },
                      },
                    },
                  },
                },
              ],
              barWidth: 10,
              itemStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(0, 1, 0, 0, Gradient),
                },
              },
              z: 2,
            },
            {
              name: '白框/里面填充柱',
              type: 'bar',
              xAxisIndex: 1,
              barGap: '-100%',
              data: [134],
              barWidth: 18,
              itemStyle: {
                normal: {
                  color: '#fff',
                  barBorderRadius: 10,
                },
              },
              z: 1,
            },
            {
              name: '外框',
              type: 'bar',
              xAxisIndex: 2,
              barGap: '-100%',
              data: [135],
              barWidth: 20,
              itemStyle: {
                normal: {
                  color: '#2F54EB',
                  barBorderRadius: 50,
                },
              },
              z: 0,
            },
            {
              name: '圆',
              type: 'scatter',
              hoverAnimation: false,
              data: [0],
              xAxisIndex: 0,
              symbolSize: 25,
              itemStyle: {
                normal: {
                  color: '#2F54EB',
                  opacity: 1,
                },
              },
              z: 2,
            },
            {
              name: '白圆/温度计圆下方圆',
              type: 'scatter',
              hoverAnimation: false,
              data: [0],
              xAxisIndex: 1,
              symbolSize: 43,
              itemStyle: {
                normal: {
                  color: '#fff',
                  opacity: 1,
                },
              },
              z: 1,
            },
            {
              name: '外圆/最外层圆',
              type: 'scatter',
              hoverAnimation: false,
              data: [0],
              xAxisIndex: 2,
              symbolSize: 47,
              itemStyle: {
                normal: {
                  color: '#2F54EB',
                  opacity: 1,
                },
              },
              z: 0,
            },
            {
              name: '刻度',
              type: 'bar',
              yAxisIndex: 0,
              xAxisIndex: 3,
              label: {
                normal: {
                  show: true,
                  position: 'left',
                  distance: 20,
                  color: '#2F54EB',
                  fontSize: 12,
                  formatter: function (params) {
                    if (params.dataIndex > 130 || params.dataIndex < 10) {
                      return ''
                    } else {
                      if ((params.dataIndex - 10) % 20 === 0) {
                        return params.dataIndex - 70
                      } else {
                        return ''
                      }
                    }
                  },
                },
              },
              barGap: '100%',
              data: kd,
              barWidth: 1,
              itemStyle: {
                normal: {
                  color: '#2F54EB',
                  length: "60%",
                  barBorderRadius: 200,
                },
              },
              z: 0,
            },
          ],
        })
      }
    },
    // 折线图
    history(e) {
      var echarts = require('echarts')
      var historyList = document.getElementById('history') // 对应地使用ByClassName
      // 通过for循环，在相同class的dom内绘制元素
      var myChart = echarts.init(historyList)
      var timer = null;
      // X轴数据
      let color = ['#5391FF']
      var xAxisData = [];
      // 需要渲染的series数据
      var seriesData = [];
      var startNumber = 0;
      // 有多少条数据
      var xAxisDatalen = xAxisData.length;
      // len的值,可以根据你的数量量设置,不要超过xAxisDatalen的值,不然不会动
      var len = 5;
      this.historyTime = setInterval(() => {
        this.setNowTimes()
        xAxisData.push(this.setNowTimes())
        seriesData.push(this.allEcharts)
        // console.log(this.allEcharts)
        myChart.setOption(option);
        if (startNumber === xAxisDatalen - len) {
          startNumber = 0;
        }
        myChart.dispatchAction({
          type: 'dataZoom',
          startValue: startNumber,
          endValue: startNumber + len,
        });
        startNumber++;
      }, 1000)
      // 基于准备好的dom，初始化echarts实例
      // var myChart = echarts.init(document.getElementById('myCharts'));
      // 指定图表的配置项和数据
      var option = {
        grid: {
          left: '5%',
          bottom: '23%',
          top: '15%',
          right: '5%',
        },

        legend: {
          top: 20,
        },
        color: color,
        tooltip: {
          trigger: 'axis',
        },
        dataZoom: [{
          type: 'slider',
          show: false,
          realtime: true,
          startValue: 0,
          endValue: 2, // 初始显示index0-30的数据,可根据你的数据量设置
          filterMode: 'none',
        },],
        xAxis: {
          show: true,
          boundaryGap: false,
          data: xAxisData
        },
        yAxis: [{
          type: 'value'
        },],
        series: [{
          type: 'line',
          smooth: true,
          name: '空气温度',
          itemStyle: {
            color: '#188df0',
          },
          symbol: 'circle', //数据交叉点样式
          areaStyle: {
            // 渐变色
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: '#188df0',
            },
              {
                offset: 1,
                color: '#83bff6',
              },
            ]),
          },
          data: seriesData
        },],
      };
    },
    timerChange() {
      // 显示当前日期时间
      this.timer = setInterval(() => {
        this.setNowTimes()
      }, 1000)
    },
    // 获取当前时间
    setNowTimes() {
      let myDate = new Date()
      let wk = myDate.getDay()
      let yy = String(myDate.getFullYear())
      let mm = myDate.getMonth() + 1
      let dd = String(myDate.getDate() < 10 ? '0' + myDate.getDate() : myDate.getDate())
      let hou = String(myDate.getHours() < 10 ? '0' + myDate.getHours() : myDate.getHours())
      let min = String(myDate.getMinutes() < 10 ? '0' + myDate.getMinutes() : myDate.getMinutes())
      let sec = String(myDate.getSeconds() < 10 ? '0' + myDate.getSeconds() : myDate.getSeconds())
      let weeks = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
      let week = weeks[wk]
      this.nowDate = yy + '-' + mm + '-' + dd
      this.nowTime = hou + ':' + min + ':' + sec
      this.nowWeek = week
      return hou + ':' + min + ':' + sec
    },
  },
}
</script>

<style scoped>
.content {
  width: 100%;
  display: flex;
  /* background: #EAEDF2; */
}

.content-left {
  width: 62.5vw;
  height: 48.9vh;
  margin-bottom: 20px;
  background: #fff;
  box-shadow: 0px 0px 10px 0px rgba(53, 94, 225, 0.04);
}

.top-title {
  width: 100%;
  height: 76px;
  padding: 0 24px;
  box-sizing: border-box;
  border-bottom: 2px solid #eaf0f7;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.weather {
  width: 300px;
  height: 50px;
}

.meter {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.thermometer {
  width: 100%;
  display: flex;
  height: 20.8vh;
}

.temperature-box {
  flex: 1;
  position: relative;
}

.temperatureList {
  width: 100%;
  height: 100%;
}

.meter {
  width: 100%;
  height: 20.8vh;
  display: flex;
}

.meter-box {
  flex: 1;
  height: 100%;
}

.myChart {
  width: 100%;
  height: 100%;
}

.time-monitor {
  width: 62.5vw;
  height: 36.2vh;
  background: #fff;
  margin-top: 1vh;
  box-shadow: 0px 0px 10px 0px rgba(53, 94, 225, 0.04);
}

.time-title {
  width: 100%;
  display: flex;
  align-items: center;
  padding-top: 10px;
  box-sizing: border-box;
  padding-right: 20px;
  justify-content: space-between;
}

.time-title div {
  display: flex;
  align-items: center;
}

.time-title div h1 {
  margin: 0;
}

.time-title div em {
  width: 5px;
  height: 20px;
  display: inline-block;
  background: #3b7ff7;
  margin-right: 15px;
}

.history-box {
  width: 100%;
  height: 100%;
}

#history {
  width: 100%;
  height: 80%;
}

.content-right {
  width: 26vw;
  height: 100%;
  background-color: #fff;
  margin-left: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.right-list {
  width: 100%;
  height: 17.2vh;
  border-bottom: 1px solid #E7E9EE;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.right-list-words {
  font-size: 18px;
  margin-top: 10px;
}
</style>
